<template>
    <el-form class="login-container" :model="loginModel" :rules="rules" label-width="0px" v-loading="loading">
        <h3>系统登录</h3>
        <el-form-item prop="userName">
            <el-input v-model="loginModel.userName" placeholder="用户名"/>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" v-model="loginModel.password" placeholder="密码"/>
        </el-form-item>
        <el-form-item>
            <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-button @click="login" type="primary" class="login-btn">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {post} from "../utils/api";

    export default {
        data() {
            return {
                loginModel:
                    {
                        userName: "sang",
                        password: "123"
                    },
                rules: {
                    userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}]
                },
                rememberPwd: false,
                loading: false,
            }
        },
        methods: {
            login() {
                this.loading = true;
                post('/login', {
                    name: this.loginModel.userName,
                    password: this.loginModel.password
                }).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.$router.replace({path: '/home'});
                    } else {
                        this.$alert('登录失败', '失败！');
                    }
                }).catch(_ => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped lang="stylus">
    .login-container {
        width 500px
        /*水平垂直居中，vh表示视口大小*/
        margin 20vh auto
        border-radius 8px
        background-color #fff
        box-shadow 0 0 25px #cac6c6
        padding 35px 35px 15px 35px

        h3 {
            margin-bottom 40px
        }

        .login-btn {
            width 100%
        }
    }

</style>
